
	<div id="action" class="easyui-dialog" closed="true" style="display:none;">
		<form class="easyui-form">
			<table>

				<tr>
					<td>小区名称：</td>
					<td>
						<input name='cellName' id="cellName" type="text" placeholder="输入小区名称">如：红花园、东海花园
					</td>
				</tr>

				<tr>
					<td>
						小区地址：
					</td>
					<td>
						<span style="float: left;">省份：</span>
						<input type="text" id="province" disabled="disabled" style="float: left;">
						<span style="float: left;">城市：</span>
						<input type="text" id="city" disabled="disabled" style="float: left;" />
						<span style="float: left;">市区：</span>
						<input type="text" id="district" disabled="disabled" style="float: left;">
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<span style="float: left;">地址：</span>
						<input type="text" id="address" style="width:500px;">
					</td>
				</tr>

				<tr>
					<td>
						地图：
					</td>
					<td id="Maps">
						<div id="container" tabindex="0" style="height: 400px;width: 560px;" class="amap-container" style="cursor: url(&quot;http://webapi.amap.com/theme/v1.4.0/openhand.cur&quot;), default;">
						</div>
					</td>
				</tr>
				<tr>
					<td>
					&nbsp;
					</td>
				</tr>

				<!-- 地图css - 160805 -->
			    <style type="text/css">

			        body {
			            font-size: 12px;
			        }
			        #tip {
			            background-color: #ddf;
			            color: #333;
			            border: 1px solid silver;
			            box-shadow: 3px 4px 3px 0px silver;
			            position: absolute;
			            top: 10px;
			            right: 10px;
			            border-radius: 5px;
			            overflow: hidden;
			            line-height: 20px;
			            z-index: 99;
			        }
			        #tip input[type="text"] {
			            height: 25px;
			            border: 0;
			            padding-left: 5px;
			            width: 280px;
			            border-radius: 3px;
			            outline: none;
			        }
			        .amap-sug-result {
			        	z-index: 999999999;
			        }

			    </style>

				<tr>
					<td>小区描述：</td>
					<td>
						<textarea name="describe" class="describe" style="width:75%;height:100px"></textarea>
					</td>
				</tr>

				<tr>
					<td>小区图片上传：</td>
					<td>
						<div>
							<input name='pic' id='pic' type="file" onchange="product.upPicMany(this)">
						</div>
					</td>
				</tr>

				<tr>
					<td>小区图片显示：</td>
					<td>
						<div id="picChild"></div>
					</td>
				</tr>

				<input type="hidden" id="position_x">
				<input type="hidden" id="position_y">
				<input type="hidden" id="position_place">
				<input type="hidden" id="link">
				<input type="hidden" name="id" id='id'>

			</table>
		</form>

	</div>

	<script type="text/javascript">

		// 设置文本编辑器KindEditor
        KindEditor.ready(function(K) {

    		window.describe = K.create('.describe', {
            	uploadJson : '/ServicePic/picSave?dir=image'
            });
        });

		// 高德地图
		function amap(json){

			if(json != null){

				if(json.province != 0 && json.city != 0 && json.district != 0 && json.address != "" && json.position_x != 0 && json.position_y != 0 && json.position_place!= "" && json.link != ""){
						center = [json.position_y, json.position_x];
						$("#province").val(json.province);
						$("#city").val(json.city);
						$("#district").val(json.district);
						$("#address").val(json.address);

						$("#position_x").val(json.position_x);
						$("#position_y").val(json.position_y);
						$("#position_place").val(json.position_place);
						$("#link").val(json.link);
				}else {
					center = null;
				}
			} else {

				center = null;
			}

		    var windowsArr = [];
		    var marker = [];
		    var map = new AMap.Map('container',{
		            resizeEnable: true,
		            zoom: 15,
		            center: center,
		            keyboardEnable: false,
		    });

		    // 修复，搜索输入框显示问题 - 160808
		    $("#container").append("<div id='tip'><input type='text' id='keyword' name='keyword' value='请输入关键字：(选定后搜索)' onfocus='this.value=&quot;&quot;'></div>");

		     //设置城市
		    AMap.event.addDomListener(document.getElementById('city'), 'change', function() {
		        //var cityName = document.getElementById('cityok').innerHTML;
		    	var cityName = $("#city option:selected").text();	        
		        if (!cityName) {
		            cityName = '深圳市';
		        }
		        map.setCity(cityName);
		    });


		    map.plugin(['AMap.ToolBar'], function() {
		        //设置地位标记为自定义标记
		        var toolBar = new AMap.ToolBar();
		        map.addControl(toolBar);
		    });

		    AMap.plugin(['AMap.Geocoder', 'AMap.Autocomplete', 'AMap.PlaceSearch'],function(){


		    	//基本参数设置
		        var marker = new AMap.Marker({
		            map:map,
		            bubble:true
		        })
		        //基本参数设置
		        var geocoder = new AMap.Geocoder({
		            city: ""//城市，默认：“全国”
		        });

		        // 鼠标点击地图功能
		        map.on('click',function(e){

		            marker.setPosition(e.lnglat);
		            geocoder.getAddress(e.lnglat,function(status,result){
						if(status=='complete'){

							// console.log(e);
							// console.log(result);
							$("#province").val(result.regeocode.addressComponent.province);
							$("#city").val(result.regeocode.addressComponent.city);
							$("#district").val(result.regeocode.addressComponent.district);
							var address = result.regeocode.formattedAddress;
							address = address.replace(result.regeocode.addressComponent.province, "");
							address = address.replace(result.regeocode.addressComponent.city, "");
							address = address.replace(result.regeocode.addressComponent.district, "");
							$("#address").val(address);

							$("#position_y").val(e.lnglat.lng);
							$("#position_x").val(e.lnglat.lat);
							$("#position_place").val(result.regeocode.formattedAddress);
							$("#link").val("http://m.amap.com/navi/?dest="+e.lnglat.lng+","+e.lnglat.lat+"&hideRouteIcon=1&key=dd81258387613b8b839c5ffd9be92cfa");

						}else{

							// alert('错误')
						}
		            })
		        })

		        // 搜索功能
				var autoOptions = {
					city: "", //城市，默认全国
					input: "keyword"//使用联想输入的input的id
				};
				autocomplete= new AMap.Autocomplete(autoOptions);
				var placeSearch = new AMap.PlaceSearch({
					city:'',
					map:map
				})
				AMap.event.addListener(autocomplete, "select", function(e){
					// TODO 针对选中的poi实现自己的功能
					
					placeSearch.search(e.poi.name)
		            geocoder.getAddress(e.poi.location,function(status,result){
						if(status=='complete'){

							$("#province").val(result.regeocode.addressComponent.province);
							$("#city").val(result.regeocode.addressComponent.city);
							$("#district").val(result.regeocode.addressComponent.district);
							var address = result.regeocode.formattedAddress;
							address = address.replace(result.regeocode.addressComponent.province, "");
							address = address.replace(result.regeocode.addressComponent.city, "");
							address = address.replace(result.regeocode.addressComponent.district, "");
							$("#address").val(address);

							$("#position_y").val(e.poi.location.lng);
							$("#position_x").val(e.poi.location.lat);
							$("#position_place").val(result.regeocode.formattedAddress);
							$("#link").val("http://m.amap.com/navi/?dest="+e.poi.location.lng+","+e.poi.location.lat+"&hideRouteIcon=1&key=dd81258387613b8b839c5ffd9be92cfa");

						}else{

							// alert('错误')
						}
		            })
				});

		    });
		}

		function submit(id){

			var method = "/daoSmallArea/smallAreaAdd";
			if(id > 0){
				var method = "/daoSmallArea/smallAreaSaveData";
			}

	        var cellName = $("#cellName").val();
	        var describeTemporary = describe.html();

			// 图片上次错误提示
			picUrl = $('#picChild img').attr('src');
			/*if(picUrl == undefined){
				$.messager.alert('提示信息', "请上传多图片");
				return;
			}*/
			// 图片上传数据组合
			var picImg = new Array();
			$('.picImg').each(function(i, n){
				var src = $(this).attr('src');
				var savename = $(this).attr('savename');
				picImg[i] = {
					"firstPictureId":i,
					"firstPictureFileName":savename,
					"firstPictureAddress":src,
				}
			});
			var picture  = JSON.stringify(picImg);

			var province = $("#province").val();
			var city = $("#city").val();
			var district = $("#district").val();
			var address = $("#address").val();
			var position_y = $("#position_y").val();
			var position_x = $("#position_x").val();
			var position_place = $("#position_place").val();
			var link = $("#link").val();

	        $.messager.progress({msg:'正在增加...',interval:3000,});
			$.ajax({
				type:"post",
				url:method,
				data:{
					cellName:cellName,
					describe:describeTemporary,
					picture:picture,
					province:province,
					city:city,
					district:district,
					address:address,
					position_y:position_y,
					position_x:position_x,
					position_place:position_place,
					link:link,
					id:id,
				},
				cache: false,
				dataType:'html',
				success:function(data){

					var data = eval('('+data+')');
					if( data.info == 'success' ){
						
						$.messager.progress('close');
						$('#action').dialog('close');
						$('#data').datagrid('reload');
					} else {
						
						$.messager.progress('close');
						$.messager.alert('提示信息', data.info);
					}
				}
			});
		}

		function doAdd(id, data){

			$("#action form").form('reset');
			$("#picChild").html('');
			describe.html('');
			amap(); //高德地图

			var title = '新增';
			if(id > 0){
				var title = '修改';
				$("#cellName").val(data.cellName);
				describe.html(data.describe);

				// 多图
				var picture = jQuery.parseJSON(data.picture);
				for (var i = 0; i < picture.length; i++) {
					var productAddress = picture[i].firstPictureAddress;
					var productFileName = picture[i].firstPictureFileName;
					$('#picChild').append("<div class='picShowWrap' style='width:100px;height:100px;position:relative;display:inline-block;float:left;'>"
											+"<img class='picImg' width='100' height='100' src='"+productAddress+"' savename='"+productFileName+"'/>"
											+"<button onclick='product.movePicMany(this)' style='position: absolute;left:0px;bottom:0px'>左移</button>"
											+"<button onclick='product.removePic(this)' style='position: absolute;right:0px;bottom:0px'>删除</button>"
											+"</div>");
				}

				amap(data); //高德地图

				$("#id").val(data.id);

			}else{
				// authority.list();
			}

			$('#action').show();
			$('#action').dialog('open').dialog({
				title:title,    
				width:"100%",    
				height:"100%",
				closed:false,    
				cache:false,    
				modal:true,
				closable:true, 
				left:0,
				top:0,
				buttons:[{
					text:'确定',
					width:'56',
					handler:function(){

						submit(id);
					}
				},{
					text:'取消',
					width:'56',
					handler:function(){

						$('#action').dialog('close');
					}
				}],
			});
		}

	</script>
